<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="admin::header">
</head>
<section>
    <script type="text/javascript">
        CKEDITOR.replace("content");
        CKEDITOR.replace("modelOption");
        CKEDITOR.replace("answer");
        CKEDITOR.replace("analysis");
        //处理CKEDITOR的值
        function CKupdate() {
            for (instance in CKEDITOR.instances)
                CKEDITOR.instances[instance].updateElement();
        }
    </script>
    <script>
        //分页查询
        getExamListByPage = function (currentPage) {
            var pageSize = $("#pageSize").val(); //每页显示条数
            var exam_name = $("#exam_name").val();//试卷信息
            var str = "/exam/exam/select?currentPage="+currentPage+"&pageSize="+ pageSize+"&exam_name="+ exam_name;
            window.location.href = (str);
        }
        //查看model
        updateModel = function (examId) {
            CKupdate();//在提交表单前需要做以上处理
            $.ajax({
                type: "POST",
                data: {examId: examId},
                url: "/exam/exam/getModelVoList",
                dataType: "json",
                success: function (data) {
                    if (data == null) {
                        window.location.href = ("/exam/exam/select?exam_name=");
                    } else {
                        //清空内容
                        $("#modelList").empty();
                        $("#modelTemp").find("li").remove();
                        $("#modelTemp").append("<li class='active'></li>");
                        var str = "";
                        var temp = "";
                        $.each(data,function (index,value) {
                            if (index > 0){
                                temp += "<li></li>";
                            }
                        var contentHtml = "<li>"+
                            "<div class='row'>"+
                                "<div class='col-md-12' style='font-size: 20px'>"+
                                "<div class='form-group' style='font-size: 25px;margin-bottom: 30px'>"+
                                    "<label for='type'>"+value.type+"</label>"+
                                    // "<input name='type' id='type' class='form-control' value="+value.type+" readonly>"+
                                "</div>"+
                                "<div class='form-group'>"+
                                    "<label for='title' class='form-control-label'>标题</label>"+
                                    "<input name='title' id='title' class='form-control' value="+value.model.title+" readonly>"+
                                "</div>"+
                                "<div class='form-group'>"+
                                    "<label for='content'>试题</label>"+
                                    "<textarea name='content' id='content' class='ckeditor form-control' rows='10' value='' readonly>"+value.model.content+"</textarea>"+
                                "</div>"+
                            "<div class='form-group'>"+
                                "<label for='modelOption'>选项</label>"+
                                "<textarea name='modelOption' id='modelOption' class='ckeditor form-control' rows='10' value='' readonly>"+value.model.modelOption+"</textarea>"+
                            "</div>"+
                            "<div class='form-group'>"+
                                "<label for='answer'>答案</label>"+
                                "<textarea name='answer' id='answer' class='ckeditor form-control' rows='6' value='' readonly>"+value.model.answer+"</textarea>"+
                            "</div>"+
                            "<div class='form-group'>"+
                                "<label for='analysis'>解析</label>"+
                                "<textarea name='analysis' id='analysis' class='form-control' rows='10' value='' readonly>"+value.model.analysis+"</textarea>"+
                            "</div>"+
                            "<div class='form-group'>"+
                                "<label for='grade'>试题分值</label>"+
                                "<input name='grade' id='grade' class='form-control' value="+value.model.grade+" readonly>"+
                            "</div>"+
                            "<div class='form-group'>"+
                                "<label for='difficulty'>试题难度</label>"+
                                "<input name='grade' id='grade' class='form-control' value="+value.difficulty+" readonly>"+
                            "</div>"+
                                "</div>"+
                                "</div>"+
                        "</li>";
                        str += contentHtml;
                            // alert(str);
                        });
                        $("#modelList").html(str);
                        $("#modelTemp").append(temp);
                        //轮播图调用
                        $("#slider").easySlider( {
                            slideSpeed: 500,
                            paginationSpacing: "15px",
                            paginationDiameter: "12px",
                            paginationPositionFromBottom: "20px",
                            slidesClass: ".slides",
                            controlsClass: ".controls",
                            paginationClass: ".pagination"
                        });
                        $("#modal-update").modal();
                    }
                }
            });
        }
        updateConfirm = function () {
            $("#modal-update").modal('hide');
            $("#modelList").empty();
            $("#modelTemp").empty();
            // window.location.href = ("/exam/exam/select?exam_name=");
        }
        //删除model
        deleteModel = function (examId) {
            $("#deleteId").val(examId);
            $("#modal-delete").modal();
        }
        deleteConfirm = function () {
            $.ajax({
                type: "POST",
                data: {examId: $("#deleteId").val()},
                url: "/exam/exam/delete",
                dataType: "json",
                success: function (data) {
                    if (data == null) {
                        alert("删除失败！请联系管理员...");
                    } else {
                        $.each(data, function (key, value) {
                            alert(value);
                        })
                    }
                    $("#modal-delete").modal('hide');
                    window.location.href = ("/exam/exam/select?exam_name=");
                }
            });
        }

        //操作model
        operateModel = function (examId) {
            $("#operateId").val(examId);
            $("#modal-operate").modal();
        }
        operateConfirm = function () {
            $.ajax({
                type: "POST",
                data: {examId: $("#operateId").val()},
                url: "/exam/exam/update",
                dataType: "json",
                success: function (data) {
                    if (data == null) {
                        alert("操作失败！请联系管理员...");
                    } else {
                        $.each(data, function (key, value) {
                            alert(value);
                        })
                    }
                    $("#modal-operate").modal('hide');
                    window.location.href = ("/exam/exam/select?exam_name=");
                }
            });
        }
    </script>

</section>
<body class="sidebar-fixed header-fixed">
<div class="page-wrapper">
    <!--导入上边栏-->
    <nav class="navbar page-header" th:include="admin::admin-navbar"></nav>

    <div class="main-container">
        <!--导入侧边栏-->
        <div class="sidebar" th:include="admin::admin-sidebar"></div>
        <div class="content">
            <div class="container" style="margin-top:150px;text-align: center;margin-bottom: 100px">
                <div class="col-md-5">
                    <form th:action="@{/exam/select}" th:method="post">
                        <div class="input-group">
                            <label style="font-size: 20px" for="exam_name">试卷&nbsp;&nbsp;&nbsp;</label>
                            <input type="text" th:value="${exam_name}" id="exam_name" name="exam_name" class="form-control" placeholder="请输入试卷名称">&nbsp;
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-primary"><i class="fa "></i> 搜索试卷</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header bg-light">
                                试卷列表
                            </div>

                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>试卷名称</th>
                                            <th>组卷类型</th>
                                            <th>所需时间</th>
                                            <th>发布者</th>
                                            <th>试卷总分</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody th:each="exam,examStat:${pageInfo.list}">
                                        <tr>
                                            <td th:text="${examStat.index+1}">1</td>
                                            <td class="text-nowrap" th:text="${exam.examName}">Samsung Galaxy S8</td>
                                            <td th:text="${exam.examType}==0?'随机':'导入'">31,589</td>
                                            <td th:text="${exam.needTime}">$800</td>
                                            <td th:text="${exam.examAuthor}"></td>
                                            <td th:text="${exam.examGrade}"></td>
                                            <td>
                                                <a id="update-btn" class="btn btn-outline-primary" th:href="@{/exam/getModelVoList(examId=${exam.examId})}">查看</a>
                                                <!--<button id="operate-btn" class="btn btn-outline-success" data-toggle="modal"-->
                                                        <!--th:text="${exam.examFlag}==0?'开始考试':'停止考试'"-->
                                                        <!--th:onclick="'javascript:operateModel('+${exam.examId}+');'">开始-->
                                                <!--</button>-->
                                                <!--<button id="delete-btn" class="btn btn-outline-danger" data-toggle="modal"-->
                                                        <!--th:onclick="'javascript:deleteModel('+${exam.examId}+');'">删除-->
                                                <!--</button>-->

                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fixed-table-pagination" style="display: block;text-align: right" >
                    <div class="pull-left pagination-detail">
                        <span class="pagination-info">显示第 <span th:text="${pageInfo.startRow}"></span> 到第 <span th:text="${pageInfo.endRow}"></span> 条记录，总共 <span th:text="${pageInfo.total}"></span>条记录</span>
                        <span class="page-list">每页显示
                         <span class="page-size"  th:text="${pageInfo.pageSize}" id="pageSize"></span>
                            <!--<span class="btn-group dropdown" style="">-->
                            <!--<button type="button" class="btn btn-default  dropdown-toggle" data-toggle="dropdown">-->
                            <!--<span class="page-size"  th:text="${pageInfo.pageSize}" id="pageSize"></span>-->
                            <!--&lt;!&ndash;保存当前页&ndash;&gt;-->
                            <!--<input type="hidden" id="pageNum" th:value="${pageInfo.pageNum}" />-->
                            <!--<span class="caret"></span>-->
                            <!--</button>-->
                            <!--<ul class="dropdown-menu" role="menu">-->
                            <!--<li  th:class="${pageInfo.pageSize== 5 }?'active':''"><a href="javascript:void(0)" th:onclick="'javascript:getUserListByPageSize('+5+')'" >5</a></li>-->
                            <!--<li  th:class="${pageInfo.pageSize== 8 }?'active':''"><a href="javascript:void(0)" th:onclick="'javascript:getUserListByPageSize('+8+')'">8</a></li>-->
                            <!--</ul>-->
                            <!--</span>-->
                        条记录
	                </span>

                    </div>
                </div>
                <nav aria-label="Page navigation" style="font-size: 20px;text-align: center">
                    <ul class="pager" id="page">
                        <li th:class="${pageInfo.hasPreviousPage}?'':'previous disabled'" style="display: inline">
                            <!--<a th:href="@{/user/getAllUser(currentPage=${pageInfo.prePage})}" aria-label="Previous">-->
                            <!--<span aria-hidden="true">&laquo;</span>-->
                            <!--&lt;!&ndash;← Previous&ndash;&gt;-->
                            <!--</a>-->
                            <a href="javascript:void(0)" th:onclick="'javascript:getExamListByPage('+${pageInfo.prePage}+');'" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                <!--← Previous-->
                            </a>
                        </li>
                        <th:block th:each="nav:${pageInfo.navigatepageNums}">
                            <li th:class="${nav==pageInfo.pageNum}?'active':''" style="display: inline">
                                <a href="javascript:void(0)" th:onclick="'javascript:getExamListByPage('+${nav}+');'" th:text="${nav}"></a>
                            </li>
                        </th:block>
                        <li th:class="${pageInfo.hasNextPage}?'':'next disabled'" style="display: inline">
                            <!--<a th:href="@{/user/getAllUser(currentPage=${pageInfo.nextPage},condition=null,info=null)}" aria-label="Next">-->
                            <!--&lt;!&ndash;Next →&ndash;&gt;-->
                            <!--<span aria-hidden="true">&raquo;</span>-->
                            <!--</a>-->
                            <a href="javascript:void(0)" th:onclick="'javascript:getExamListByPage('+${pageInfo.nextPage}+');'" aria-label="Next">
                                <!--Next →-->
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<!--查看-->
<div class="modal fade" id="modal-update" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary border-0">
                <h5 class="modal-title text-white">试卷查看</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" th:onclick="'javascript:updateConfirm()'">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!--输入框-->
            <div class="card-body">
                <div id="slider">
                    <ul class="slides clearfix" id="modelList">
                        <!--<li>-->
                            <!--<img class="responsive" src="../static/imgs/banner001.jpg">-->
                        <!--</li>-->
                        <!--<li><img class="responsive" src="../static/imgs/banner002.jpg"></li>-->
                        <!--<li><img class="responsive" src="../static/imgs/banner003.jpg"></li>-->
                        <!--<li><img class="responsive" src="../static/imgs/banner004.jpg"></li>-->
                        <!--<li><img class="responsive" src="../static/imgs/banner005.jpg"></li>-->
                    </ul>
                    <ul class="controls">
                        <li><img src="../static/imgs/prev.png" alt="previous"></li>
                        <li><img src="../static/imgs/next.png" alt="next"></li>
                    </ul>
                    <ul class="pagination" id="modelTemp">
                        <li class="active"></li>
                        <!--<li></li>-->
                        <!--<li></li>-->
                        <!--<li></li>-->
                        <!--<li></li>-->
                    </ul>
                </div>

            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-link" data-dismiss="modal" th:onclick="'javascript:updateConfirm()'">Close</button>
                <button type="button" class="btn btn-primary" th:onclick="'javascript:updateConfirm()'">Continue
                </button>
            </div>
        </div>
    </div>
</div>
<!--删除-->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger border-0">
                <h5 class="modal-title text-white">试卷删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body p-5">
                您确认要删除该试卷吗？
                <input type="hidden" id="deleteId" name="deleteId"/>
            </div>

            <div class="modal-footer border-0">
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" th:onclick="'javascript:deleteConfirm()'">Continue</button>
            </div>
        </div>
    </div>
</div>
<!--开始-->
<div class="modal fade" id="modal-operate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success border-0">
                <h5 class="modal-title text-white">操作试卷</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body p-5">
                您确认要操作该试卷吗？
                <input type="hidden" id="operateId" name="operateId"/>
            </div>

            <div class="modal-footer border-0">
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" th:onclick="'javascript:operateConfirm()'">Continue</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
